<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户设置</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <style>
    /*用户设置样式*/
    .alluserSetupstyle .leftinfo{
      width: 242px;
      height: 100%;
      position:absolute;
      border-right: 1px solid #eee;
    }
    .alluserSetupstyle .leftinfo .img-upload{
      width: 130px;
      height: 130px;
      cursor: pointer;
      border-radius: 80px;
      margin: 36px auto;
    }
    .alluserSetupstyle .leftinfo .user-name{
      font-size: 24px;
      text-align: center;
      width: 100%;
      display: block;
      color: #000;
    }
    .alluserSetupstyle .leftinfo .sendUsermessage{
      position: absolute;
      bottom: 22px;
      left: 80px;
    }
    .alluserSetupstyle .rightinfo{
      width: 476px;
      height: 100%;
      position:absolute;
      right: 0;
    }
    .alluserSetupstyle .leftinfo .signNameisshow{
      border: none;
    }
    .alluserSetupstyle .leftinfo .signNameisshow:hover{
      border: 1px solid;
    }
  </style>
</head>
<body>
<!--用户设置-->
  <div class="alluserSetupstyle layui-form" lay-filter="userinfomodify" style="position: relative;height: 420px">
    <div class="leftinfo">
      <div style="padding:0 20px">
        <div class="img-upload" id="img-upload">
          <img src="" alt="" class="imgPath" style="width: 100%;height: 100%;border-radius: 80px">
          <input type="hidden" value="" name="avatar" id="pictureUrl" class="pictureUrlpath">
        </div>
        <span class="user-name"></span>
      </div>
      <div class="layui-form-item" style="margin-bottom: 0;margin-top: 80px">
        <label class="layui-form-label" style="padding: 5px 0px;width: 70px">个性签名</label>
        <div class="layui-input-block" style="min-height: 30px;margin-left: 82px">
          <input type="text" name="sign" maxlength="120" placeholder="定制你的个性签名" class="layui-input signNameisshow" style="height: 30px;width: 90%;">
        </div>
      </div>
    </div>
    <div class="rightinfo">
      <div class="layui-form-item" style="margin-bottom: 0;margin-top: 10px">
        <label class="layui-form-label" style="padding: 5px 15px">用户名称</label>
        <div class="layui-input-block" style="min-height: 30px">
          <div style="height: 30px;line-height: 30px">
            <span class="userNameshow"></span>
            <i class="layui-icon layui-icon-edit" style="margin-left: 10px;cursor: pointer" ccpim-event="userNameshow"></i>
          </div>
          <input type="text" name="username" maxlength="20" class="layui-input userNameisshow" style="height: 30px;width: 60%;display: none">
        </div>
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <div class="layui-input-inline">
        <input type="button" lay-submit lay-filter="userinfosubmit" id="userinfosubmit" value="确认" class="layui-btn">
      </div>
    </div>
  </div>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script>
  layui.use(['jquery','layer','upload','form','layim'], function(){
    var $=layui.jquery,layer=layui.layer,form=layui.form,upload=layui.upload,layim=layui.layim;
    var userId='${userId}';

      ajaxuserinfo();
      function ajaxuserinfo() {//群聊信息
        $.ajax({
          url: serverPath.imPath+ ' /im/imUser/get',
          type: "get",
          contentType: 'application/json',
          dataType: 'json',
          data: {userId:userId},
          success: function (data) {
            var datas=data.data;
            form.val('userinfomodify', {
              "username": datas.username
              ,'avatar':datas.avatar
              ,'sign':datas.sign
            });
            $('.alluserSetupstyle .imgPath').attr("src",datas.avatar);
            $('.alluserSetupstyle .user-name').html(datas.username);
            $('.alluserSetupstyle .userNameshow').html(datas.username);
          }
        })
      };

    //图片上传
    var uploadInst = upload.render({
      elem: '#img-upload' //绑定元素
      ,url: serverPath.systemPath + '/system/attachFile/fileUpload' //上传接口
      ,accept: 'images' //允许上传的文件类型
      ,size: 51200
      ,exts:'jpg|png|jpeg'
      ,done: function(ret){
        //上传完毕回调
        if(ret.code === 0){
          if(ret.data){
            var fileOne = ret.data.fileList[0];
            var fileId = fileOne.fileId;
            var path = serverPath.systemPath + '/system/attachFile/getFileById?fileId='+fileId;
            $('.alluserSetupstyle .imgPath').attr("src",path);
            $('#pictureUrl').val(path);
          }
        }else{
          layer.alert(ret.msg);
        }
      }
    });

    form.on('submit(userinfosubmit)', function(data){
      data.field.id=userId;
      $.ajax({
        url: serverPath.imPath+ '/im/imUser/updateUserInfo',
        type: "POST",
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(data.field),
        success: function (data) {
          if(data.code==0){
              parent.layer.close(parent.layer.getFrameIndex(window.name));
          }else{
            parent.layer.alert(data.msg,function (index) {
              parent.layer.close(index);
            });
          }
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    var events={
            //用户设置  群名称修改显示隐藏
              userNameshow:function () {
              $(this).parent().hide();
              $(this).parent().next().show()
             }
        };

    //用户设置  群名称修改显示隐藏
    $('.rightinfo .userNameisshow').blur(function () {
      $('.rightinfo .userNameshow').html($(this).val());
      $(this).hide();
      $('.rightinfo .userNameshow').parent().show();
    });

    //个性签名 获取焦点
    $('.leftinfo .signNameisshow').focus(function () {
      $(this).css('background','#eee')
    });
    //个性签名 失去焦点
    $('.leftinfo .signNameisshow').blur(function () {
     $(this).css('background','#fff')
    });

    $('body').on('click', '*[ccpim-event]', function(e){
      var othis = $(this), methid = othis.attr('ccpim-event');
      events[methid] ? events[methid].call(this, othis, e) : '';
    });
  })
</script>
</body>
</html>
